﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">

    <%--style css cho menu--%>
    <style type="text/css">
        #box_nav
        {
            padding: 0;
            margin: 0;
            width: 960px;
            position: relative;
            margin: auto;
        }
        #box_nav li
        {
            float: left;
            margin: 0;
            display: inline-block;
            list-style: none;
            border: 1px solid #CCC;
            padding: 0px 10px;
        }
        #box_nav .wait
        {
            display: block;
            margin: 50px auto;
            height: 64px;
            width: 64px;
        }
        #nav_content
        {
            border: 1px solid #CCC;
            background: #FFF;
            display: none;
            height: 200px;
            position: absolute;
            width: 960px;
        }
        </style>
       <%--jquery--%>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <%--script  cho menu--%>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#box_nav").append('<div id="nav_content"><img class="wait" src="http://www.w3schools.com/jquery/demo_wait.gif"  /></div>');
            $("#box_nav li ").hover(function() {
                $("#nav_content").css("display", "block").css("top", $("#box_nav li").height() + "px");
                var id = 0;
                id = $(this).find("a").attr("title");
                $("#nav_content").ajaxStart(function() {
                    $(".wait").css("display", "block");
                });
                $("#nav_content").ajaxComplete(function() {
                    $(".wait").css("display", "none");
                });
                //thay lai domain
                var domain = "http://localhost:12544/";

                //goi den url file Handler => navHL.ashx?id=.. o day them so chuyen vao la` id
                
                $.getJSON(domain + "navHL.ashx?id=" + id + "&callback=?", function(data) {
                    var htmlStr = "";
                    if (data != null) {
                        if (data.Message == "SUCCESS") {
                            
                            //html content menu chinh` sua theo giao dien
                            // o` day moi lay ra 2 gia' tri cua object title & image
                            htmlStr += '<div class="title">' + data.Value.title + '</div>';
                            htmlStr += '<img src="' + data.Value.image + '">';
                            //end html content menu

                            $("#nav_content").html(htmlStr);
                        }
                        else if (data.Message == "ERROR") {
                            alert(data.Value);
                        }
                    }
                });
            },
            function() {
                //url = duong` dan~ anh` load  wait            
                $("#nav_content").css("display", "none").html('<img class="wait" src="http://www.w3schools.com/jquery/demo_wait.gif"  />');
            }
            );
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ul id="box_nav">
         <%-- trong the` <a title="?"> title la`ma~ id cua` tin--%>
        <li><a title="1">home</a> </li>
        <li><a title="2">home</a> </li>
        <li><a title="7">home</a> </li>
        <li><a title="4">home</a> </li>
        <li><a title="5">home</a> </li>
        <li><a title="6">home</a> </li>
    </ul>
    </form>
</body>
</html>
